<template>
	<view class="registration-form-page">
		<view class="form-block" style="border-radius:30rpx 30rpx 0 0 ;">
			<view class="form-title">填写问卷</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>乡镇、村、组</view>
				<view class="form-content">
					<MultipleColPicker class="form-ctrl" :range="township" :value="form.groupId" @selected="bindTownship"></MultipleColPicker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>姓名</view>
				<view class="form-content">
					<input v-model.trim="form.realName" maxlength="5" type="text" placeholder="请输入姓名" placeholder-class="inputPlaceholder" class="form-ctrl" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>性别</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="sex" range-key="value" :value="sexIndex" @change="bindPicker($event,'sex')">{{sex[sexIndex]['value']}}</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>民族</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="nationId" range-key="name" :value="nationIdIndex" @change="bindPicker($event,'nationId')">{{nationId[nationIdIndex]['name']}}</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">学历</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="educationId" range-key="data" :value="educationIdIndex" @change="bindPicker($event,'educationId')">{{educationId[educationIdIndex]['data']}}</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>身份证号码</view>
				<view class="form-content">
					<input v-model="form.idCard" maxlength="18" type="idcard" placeholder="请输入身份证号码" placeholder-class="inputPlaceholder" class="form-ctrl" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>手机号码</view>
				<view class="form-content">
					<input v-model.number="form.mobile" maxlength="11" type="number" placeholder="请输入手机号码" placeholder-class="inputPlaceholder" class="form-ctrl" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>年龄（周岁）</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="age" range-key="value" :value="ageIndex" @change="bindPicker($event,'age')">{{age[ageIndex]['value']}}</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>就业状态</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="employment" range-key="value" :value="employmentIndex" @change="bindPicker($event,'employment')">{{employment[employmentIndex]['value']}}</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<template v-if="form.employment==1">
				<view class="form-item">
					<view class="form-label"><text class="require">*</text>从业类型</view>
					<view class="form-content">
						<picker class="form-ctrl" :range="practiceState" range-key="value" :value="practiceStateIndex" @change="bindPicker($event,'practiceState')">{{practiceState[practiceStateIndex]['value']}}</picker>
						<view class="iconfont icon-gengduo1 arrow"></view>
					</view>
				</view>
				<view class="form-item" v-if="form.practiceState==2">
					<view class="form-label"><text class="require">*</text>外出务工地点</view>
					<view class="form-content">
						<input v-model.trim="form.practiceAddress" maxlength="10" type="text" placeholder="请输入外出务工地点(城市)" placeholder-class="inputPlaceholder" class="form-ctrl" />
					</view>
				</view>
				<view class="form-item">
					<view class="form-label"><text class="require">*</text>从事工种</view>
					<view class="form-content">
						<picker class="form-ctrl" :range="jobProfession" range-key="name" :value="workTypeIdIndex" @change="bindPicker($event,'workTypeId','jobProfession')">{{jobProfession[workTypeIdIndex]['name']}}</picker>
						<view class="iconfont icon-gengduo1 arrow"></view>
					</view>
				</view>
			</template>
			
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>是否有务工意愿</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="is" range-key="value" :value="wishWorkIndex" @change="bindPicker($event,'wishWork','is')">{{is[wishWorkIndex]['value']}}</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<template v-if="form.wishWork==1">
				<view class="form-item">
					<view class="form-label"><text class="require">*</text>意愿务工地点</view>
					<view class="form-content">
						<input v-model.trim="form.wishPracticeAddress" maxlength="10" type="text" placeholder="请输入意愿务工地点(城市)" placeholder-class="inputPlaceholder" class="form-ctrl" />
					</view>
				</view>
				<view class="form-item">
					<view class="form-label"><text class="require">*</text>意愿务工工种</view>
					<view class="form-content">
						<picker class="form-ctrl" :range="jobProfession" range-key="name" :value="wishWorkTypeIdIndex" @change="bindPicker($event,'wishWorkTypeId','jobProfession')">{{jobProfession[wishWorkTypeIdIndex]['name']}}</picker>
						<view class="iconfont icon-gengduo1 arrow"></view>
					</view>
				</view>
			</template>
			
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>是否有培训需求</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="is" range-key="value" :value="whetherTrainIndex" @change="bindPicker($event,'whetherTrain','is')">{{is[whetherTrainIndex]['value']}}</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<template v-if="form.whetherTrain==1">
				<view class="form-item">
					<view class="form-label"><text class="require">*</text>意愿培训工种</view>
					<view class="form-content">
						<picker class="form-ctrl" :range="jobProfession" range-key="name" :value="trainWorkTypeIdIndex" @change="bindPicker($event,'trainWorkTypeId','jobProfession')">{{jobProfession[trainWorkTypeIdIndex]['name']}}</picker>
						<view class="iconfont icon-gengduo1 arrow"></view>
					</view>
				</view>
			</template>
			<view class="form-item">
				<view class="form-label">已持证名称</view>
				<view class="form-content">
					<input v-model.trim="form.certificateName" maxlength="10" type="text" placeholder="请输入已持证名称" placeholder-class="inputPlaceholder" class="form-ctrl" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>是否退伍军人</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="is" range-key="value" :value="veteranIndex" @change="bindPicker($event,'veteran','is')">{{is[veteranIndex]['value']}}</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>是否返乡农民工</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="is" range-key="value" :value="returnHomeIndex" @change="bindPicker($event,'returnHome','is')">{{is[returnHomeIndex]['value']}}</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">备注</view>
				<view class="form-content">
					<input v-model="form.notes" maxlength="50" type="text" placeholder="请输入备注" placeholder-class="inputPlaceholder" class="form-ctrl" />
				</view>
			</view>
			
		</view>
		<view class="btn" @click="submit">提交问卷</view>
	</view>
</template>

<script>
	import {validate} from '@/util/validate.js'
	import {idCardValidate} from '@/util/idCardValidate.js';
	import MultipleColPicker from '@/page_other/components/Picker/MultipleColPicker'
	import {getEducation,getQuestionnaireConfig,addQuestionnaireInvestigation} from '@/api/registration.js'
	export default {
		components:{MultipleColPicker},
		data() {
			return {
				form: {
					realName:'',
					sex:1,
					nationId:0,
					educationId:0,
					idCard:'',
					mobile:'',
					age:16,
					household:2,
					groupId:[],
					
					employment:1,
					practiceState:1,
					practiceAddress:'',
					workTypeId:0,
					wishWork:1,
					wishWorkTypeId:0,
					wishPracticeAddress:'',
					
					whetherTrain:1,
					trainWorkTypeId:0,
					certificateName:'',
					
					veteran:2,
					returnHome:2,
					notes:'',
				},
				rules: {
					realName:{
						required:true,
						name:'姓名'
					},
					sex:{
						required:true,
						name:'性别'
					},
					age:{
						required:true,
						name:'年龄'
					},
					idCard:{
						required:true,
						name:'身份证号码',
					},
					mobile:{
						required:true,
						name:'手机号码',
					},
					nationId:{
						required:true,
						name:'民族',
					},
					employment:{
						required:true,
						name:'就业状态',
					},
					wishWork:{
						required:true,
						name:'是否有务工意愿',
					},
					whetherTrain:{
						required:true,
						name:'是否有培训需求',
					},
					veteran:{
						required:true,
						name:'是否退伍军人',
					},
					returnHome:{
						required:true,
						name:'是否返乡农民工',
					},
					groupId:{
						required:true,
						name:'所属乡镇村组',
					}
				},
				
				sex:[{id:1,value:'男'},{id:2,value:'女'}],
				sexIndex:0,
				
				age:[],
				ageIndex:0,
				
				nationId:[],
				nationIdIndex:0,
				
				educationId:[],
				educationIdIndex:0,
				
				township:[],
				
				employment:[{id:1,value:'已就业'},{id:2,value:'未就业'}],
				employmentIndex:0,
				
				practiceState:[{id:1,value:'务农(偶尔打零工)'},{id:2,value:'常年外出打工'}],
				practiceStateIndex:0,
				
				jobProfession:[],
				workTypeIdIndex:0,
				wishWorkTypeIdIndex:0,
				trainWorkTypeIdIndex:0,
				
				is:[{id:1,value:'是'},{id:2,value:'否'}],
				wishWorkIndex:0,
				whetherTrainIndex:0,
				veteranIndex:1,
				returnHomeIndex:1,
			}
		},
		methods: {
			bindPicker(e,key,rangeKey=''){
				const index=e.detail.value;
				this.$set(this,key+'Index',index);
				this.$set(this.form,key,this[rangeKey||key][index].id)
			},
			bindTownship(township){
				this.form.groupId=township
			},
			submit(){
				let rules=JSON.parse(JSON.stringify(this.rules));
				let form=JSON.parse(JSON.stringify(this.form))
				rules.idCard.validator=function(value,form,callback){
							const result=idCardValidate(value)
							if(!result.result){
								callback(result.msg)
							}
							callback();
						}
				rules.mobile.validator=function(value,form,callback){
							if(!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value)){
								callback('请输入正确的手机号码');
							}
							callback()
						}
				form.groupId=form.groupId.join(',');
				
				if(form.employment==1){
					rules.practiceState={required:true,name:'从业类型'}
					rules.workTypeId={required:true,name:'从事工种'}
					if(form.practiceState==1){
						delete form.practiceAddress;
					}else{
						rules.practiceAddress={required:true,name:'外出务工地点'}
					}
				}else{
					delete form.practiceState;
					delete form.practiceAddress;
					delete form.workTypeId;
				}
				
				if(form.wishWork==2){
					delete form.wishPracticeAddress
					delete form.wishWorkTypeId
				}else{
					rules.wishPracticeAddress={required:true,name:'意愿务工地点'}
					rules.wishWorkTypeId={required:true,name:'意愿务工工种'}
				}
				
				if(form.whetherTrain==2){
					delete form.trainWorkTypeId
				}else{
					rules.trainWorkTypeId={required:true,name:'意愿及培训工种'}
				}
				if(validate(form,rules)){
					uni.showLoading({
						title:'提交中',
						mask:true
					})
					addQuestionnaireInvestigation(form).then(()=>{
						this.showToast('提交成功,感谢您的参与',()=>{
							uni.switchTab({
								url:'/pages/home/index'
							})
						})
					})
				}
			},
			async getConf(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				let education=await getEducation();
				this.educationId=education;
				this.educationId.unshift({id:0,data:'请选择学历'})
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				let nation=await getQuestionnaireConfig({type:1});
				this.nationId=nation;
				if(nation&&nation.length>0){
					this.form.nationId=nation[0].id
				}
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				let township=await getQuestionnaireConfig({type:2});
				// this.form.groupId=[township[0]?.id||0,township[0]?.child[0]?.id||0,township[0]?.child[0]?.child[0]?.id||0];
				this.township=township;
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				let jobProfession=await getQuestionnaireConfig({type:3});
				this.jobProfession=jobProfession;
				if(jobProfession&&jobProfession.length>0){
					this.form.workTypeId=jobProfession[0].id
					this.form.wishWorkTypeId=jobProfession[0].id
					this.form.trainWorkTypeId=jobProfession[0].id
				}				
			}
		},
		onLoad() {
			for(let i=16;i<61;i++){
				this.age.push({id:i,value:i+'岁'})
			}
			this.getConf()
		}

	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.registration-form-page {
		width: 100%;
		padding-bottom: 150rpx;

		.btn {
			width: 350rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #FF7626;
			color: #fff;
			font-size: 28rpx;
			border-radius: 40rpx;
			position: fixed;
			transform: translate(-50%,-50%);
			left: 50%;
			bottom: 0rpx;
			z-index: 999999;
		}

		.user-photo-block {
			width: 100%;
			height: 450rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.user-photo {
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
			}
		}

		.form-block {
			width: 100%;
			box-shadow: 0 0 10px 0 #efefef;
			background: #fff;
			padding: 30rpx;

			.form-title {
				font-size: 36rpx;
				font-weight: bold;
			}

			.sub-title {
				font-size: 26rpx;
				color: #999;
			}

			.form-item {
				display: flex;
				flex-direction: column;
				border-bottom: 1px solid #efefef;
				padding-top: 30rpx;

				.form-label {
					font-size: 28rpx;
					color: #999;
					.require{
						color: red;
					}
				}

				.form-content {
					display: flex;
					flex-direction: row;
					align-items: center;

					.form-ctrl {
						height: 100rpx;
						line-height: 100rpx;
						flex-grow: 1;
					}

					.arrow {
						flex-grow: 0;
						color: #999;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>
